One of the most significant limitations of HTML has been the inability to lay pages out in the same way they are laid out on paper. It can be possible, although not always, to lay out pages using tables and spacer (1 pixel) gifs, but this both violates our principle of separating content from appearance, and is guaranteed to cause maintenance headaches until the end of time, as new browser versions fail to layout the pages exactly as they work in older browsers.
With CSS, you now have the ability to place elements on web pages with absolute, fixed, relative and static positioning.
Absolute positioning means that an element in placed on the page completely independently from the flow of the rest of the page. Its location bears no relation to the location or size of its parent, or container element. A position is specified in relation to the top left corner of the page.
Fixed positioning is a subset of absolute positioning. An element with a fixed position is positioned with respect to the viewport (that is the window), rather than the top left of the page. This means that when a page is scrolled, the fixed element maintains its location in the window, much like a background image which is fixed.
With relative positioning, elements behave much as they normally would on HTML pages, that is they flow into position. Their position is essentially adjusted relative to where they would normally be found (that is their static position, see below)- for example moved several pixels up from where they would be in the normal flow of a document.
Static positioning is the default positioning value, and is essentially the type of positioning we know and love. That is, elements flow depending on their container (parent) element and sibling elements.
In addition to positioning, the page layout properties let us specify the width and the height of elements. CSS also enables the developer to specify the a z-index or stacking order for an element (which determines which element appears in front of another so obscuring it if they overlap), and how the contents should be displayed when they are too big for the described width and height (this is called overflow). Whether or not an element is visible can be specified, and lastly, CSS even enables us to specify what is technically known as the clipping area, or clip of an element. This is the part of the element that is in fact drawn.
Positioning enables very sophisticated page layout, but as with any powerful technology, it is complicated at times. For more detail on positioning with CSS, see our tutorial Positioning with CSS2.
The page layout elements are:
The position property only specifies how an element will be placed on the page by a browser. The actual position is specified using the top and left properties which we cover below.
Elements can be positioned in one of four ways: statically, relatively absolutely or fixed. The value is specified by one of four keywords: static, relative, absolute and fixed.
When the position of an element is static, the browser will draw the element in the usual place. Essentially, this is the traditional positioning used with straight HTML.
When the position is specified as relative, an element is placed with respect to its natural position, that is, with respect to where it would be if statically positioned.
For example, with a relative position, a top of 20px and a left of 20px (we'll look at the top and left properties very shortly), an element is placed 20px to the right and 20px down from where it would naturally, or statically be located.
With absolute positioning, an element is placed in a specified location with respect to either the top left of the page, or with respect to its parent element. Fixed positioning as we have seen is related. Instead of the element being positioned with respect to the top left of the page, it's positioned with respect to the top left of the window. This means if the page is scrolled, the element remains fixed with respect to the top and left of the window.
When no position property is specified, an element has a static position.
An element does not inherit the position property of its parent.
Take some time to consider the differences between the different types of positioning possible. We discuss the whole mechanism of positioning more fully in our tutorial Positioning with CSS2.
The top property specifies where the top of an element will be placed. Remember that the actual position on the page is affected by the value of the position property we looked at just above.
top is an offset from either the natural location of the element (for relative positioning), from the top of the page or the top of the parent element, for absolute position, or from the top of the window for fixed positioning. See position above for more on when each is the case.
Negative top values move an element up the page, positive top values move the element down the page.
For elements with a static position, top has no effect.
The top of an element can be specified using length values, percentage values, or using the auto keyword.
Length Values
When the top is specified using a length value, the element is offset up or down the page from a location determined by the position value of the element.
We cover length values in detail in our section on values.
Percentage Values
When top is specified as a percentage value, the element is offset up or down the page by this percentage of the height of its parent element.
We cover percentage values in detail in our section on values.
Auto
A top of auto places the element with no offset up or down the page.
If no top is specified, the top of the element is auto.
An element does not inherit the top of its parent, however, an element may be affected by the positioning of its parent element.
top specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how positioning works to ensure that you achieve your desired outcomes. We cover positioning in detail in our tutorial Positioning with CSS2.
The left property specifies where the left of an element will be placed. Remember that the actual position on the page is affected by the value of the position property we looked at above.
left is an offset from either the natural location of the element (for relative position), from the left of the page or the left of the parent element, for absolute position, or from the left of the window, for fixed position. See position above for more on when each is the case.
Negative left values move an element leftwards along the page, positive left values move the element rightwards.
For elements with a static position, left has no effect.
The left of an element can be specified using length values, percentage values, or using the auto keyword.
Length Values
When the left is specified using a length value, the element is offset to the left or to the right along the page from a location determined by the position value of the element.
We cover length values in detail in our section on values.
Percentage Values
When left is specified as a percentage value, the element is offset to the left or to the right along the page by this percentage of the width of its parent element.
We cover percentage values in detail in our section on values.
Auto
A left of auto places the element with no offset leftwards or rightwards on the page.
If no left is specified, the left of the element is auto.
An element does not inherit the left of its parent. However, the left of an element can be affected by the position of its parent.
left specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent on the page. You will need to have a fair understanding of how positioning works to ensure that you achieve your desired outcomes. We cover positioning in detail in our tutorial Positioning with CSS2.
The bottom property specifies where the bottom edge of an element will be placed. Remember that the actual position on the page is affected by the value of the position property we looked at just above.
bottom is an offset from either the natural location of the element (for relative position), from the top of the page or the top of the parent element, for absolute position, or from the top of the window for fixed position. See position above for more on when each is the case.
For elements with a static position, bottom has no effect.
The top of an element can be specified using length values, percentage values, or using the auto keyword.
Length Values
When the top is specified using a length value, the element is offset up or down the page from a location determined by the position value of the element.
We cover length values in detail in our section on values.
Percentage Values
When bottom is specified as a percentage value, the bottom edge of an element is offset up or down the page by this percentage of the height of its parent element.
We cover percentage values in detail in our section on values.
Auto
A bottom of auto places the element with no offset up or down the page.
If no bottom is specified, the bottom of the element is auto.
An element does not inherit the bottom of its parent.
The right property specifies where the right edge of an element will be placed. Remember that the actual position on the page is affected by the value of the position property we looked at just above.
right is an offset from either the natural location of the element (for relative position), from the left of the page or the left of the parent element, for absolute position, or from the left of the window, for fixed position. See position above for more on when each is the case.
For elements with a static position, left has no effect.
The right of an element can be specified using length values, percentage values, or using the auto keyword.
Length Values
When the right is specified using a length value, the right edge of the element is offset to the left or to the right along the page from a location determined by the position value of the element.
We cover length values in detail in our section on values.
Percentage Values
When right is specified as a percentage value, the right edge of the element is offset to the left or to the right along the page by this percentage of the width of its parent element.
We cover percentage values in detail in our section on values.
Auto
A right of auto places the right edge of an element with no offset leftwards or rightwards on the page.
If no right is specified, the right of the element is auto.
An element does not inherit the right of its parent.
Not surprisingly, this property specifies how wide an element would appear on a page.
width can be specified as a percentage, as a length value, or as auto.
Percentage Values
When a width is specified as a percentage, its width is this percentage of the width of its parent. We cover percentage values in detail in our section on values.
Length Values
A width can be specified as a length. Lengths are covered in detail in our section on values.
Auto
A width of auto is the default width of an item.
If no value is set for the width of an element, its width is set to auto.
An element does not inherit the width of its parent.
width was specified as part of the original CSS1 recommendation. It is modified in part by the CSS2 recommendation.
This property allows you to specify a minimum width for an element. When the width of an element is calculated, should it be less than this property, this specifies the width of the element.
min-width can be specified as a percentage, as a length value, or none.
Percentage Values
When a min-width is specified as a percentage, its min-width is this percentage of the width of its parent. We cover percentage values in detail in our section on values.
Length Values
A min-width can be specified as a length. Lengths are covered in detail in our section on values.
If no value is set for the min-width of an element, its min-width is set to none.
An element does not inherit the min-width of its parent.
This property specifies allows you to specify a maximum width for an element. When the width of an element is calculated, should it be greater than this property, this specifies the width of the element.
max-width can be specified as a percentage, as a length value, or none.
Percentage Values
When a max-width is specified as a percentage, its max-width is this percentage of the width of its parent. We cover percentage values in detail in our section on values.
Length Values
A max-width can be specified as a length. Lengths are covered in detail in our section on values.
If no value is set for the max-width of an element, its max-width is set to none.
An element does not inherit the max-width of its parent.
The height property enables you to specify the height of an element in a number of ways.
height can be specified as a percentage, as a length value, or as auto. Percentage heights are part of the CSS2 recommendation, but were not part of the original CSS1 recommendation.
Percentage Values
When a height is specified as a percentage, its height is this percentage of the height of its parent. We cover percentage values in detail in our section on values.
Length Values
A height can be specified as a length. Lengths are covered in detail in our section on values.
Auto
A height of auto is the default height of an item.
If no value is set for the height of an element, it's height is set to auto.
An element does not inherit the height of its parent.
height was specified as part of the original CSS1 recommendation. It is modified in part by the CSS2 recommendation.
Because CSS allows the absolute positioning of elements on a page, we need to take care of the situation where elements overlap. The stacking order is specified using the z-index property. It determines which elements are in front of others when they overlap.
z-index is specified either by an integer, or by the keyword auto.
Integer Values
When z-index is specified using an integer, the higher the integer, the closer to the front the element is. A complicating factor is when elements are nested within one another. The stacking order is relative to elements that share the same parent element. For more on stacking, see our tutorial Positioning with CSS2.
Auto
When the z-index is specified as auto, the browser determines the place of an element in the stacking order according to a relatively complicated set of rules, but in a nutshell, in the order in which the elements appear in the HTML code of the page. If you want to fully understand how stacking works, please take a look at the advanced style sheets concepts section.
Where no z-index is specified, the z-index of an element is auto.
An element does not inherit the z-index of its parent element. However, the stacking of elements is relative to parent elements. That is, where we have two elements, both with child elements, then all of the child elements of the parent with the higher z-index are in front of all of the child elements of the other parent element.
Although the rules associated with stacking seem complicated, they are in fact the intuitive way for stacking to work. If there are two elements, each with child elements, then it makes sense that all of the children of the front-most element would be in front of all of the children of the element behind.
This same rule can be applied recursively, so that within an element, if more than one child itself has child elements, then the children of the front-most child are all in front of the children of the other child. And so on ad infinitum.
While it might not seem to make much sense to make an element of a page invisible, in conjunction with scripting (for example with Javascript), showing and hiding elements when a user clicks, or moves a mouse over an element, or even based on time can be a powerful tool. The visibility property lets you make an element either visible or invisible.
visibility can be specified as one of three keywords, visible, hidden and inherit.
A visibility of visible and hidden are straightforward.
A visibility of inherit specifies that an element should have the same visibility as its parent.
If no visibility is specified, an element has a visibility of inherit.
An element only inherits its parent's visibility if the element's visibility is set to inherit.
An element with a visibility of hidden still affects the drawing and layout of a page. The page is still laid out as if the element were visible. If you would like page to be laid out as if the element were not there at all (and for the element to also be invisible) then the display property which we discuss elsewhere has a possible value of none, which has the described effect.
Because the width and height of elements can now be set by an author, we may have the situation where an element is not big enough to fit its contents. What do we do when this occurs? For images, traditionally the image is scaled to fit the size of the element. CSS introduces the overflow property to let you specify how a browser should display elements where the contents of the element do not all fit into the width and height of the element.
overflow can take the keyword values visible, hidden, scroll, and auto.
An overflow of visible means that the browser should increase the width and/or the height of the element to display all of its contents.
An overflow of hidden means that the browser should 'clip' the contents, displaying only the contents which are visible within the specified width and height.
An overflow of scroll means that the browser should place scrollbars on the element whether or not the contents of the element have overflowed.
An overflow of auto means that the browser should add scrollbars as needed to enable users to scroll horizontally and/or vertically to show hidden contents of the element.
The last two values should be familiar to those who have worked with frames in HTML. Frames can have a scroll specified never, always and auto. These correspond to hidden, scroll and auto.
If no overflow is specified, the overflow of an element is visible.
An element does not inherit the overflow of its parent.
Theoretically, with the overflow property, the need for frames is greatly reduced. Unfortunately, as of the time of writing, browsers did not support the overflow property.
Of all the properties in CSS1 and CSS2, float and clear are probably the two that most users will have had least exposure to.
Float has a simple effect, but follows what can be a quite complicated set of rules. We discuss these rules more fully in our advanced CSS concepts section.
The effect of the float property is to take an element out of the flow and place it to the left or right of other elements in the same parent element.
float can be specified by one of three keywords: none, left and right.
A float of none means that an element flows as it would naturally in the flow of its page.
A float of left means that an element is detached from the natural flow of the page, and is treated as a block element to the left of the rest of the contents of its parent element.
A float of right means that an element is detached from the natural flow of the page, and is treated as a block element to the right of the rest of the contents of its parent element.
If no float is specified, elements have a float of none.
An element does not inherit the float of its parent.
Float can be a tricky concept, although the basic effect is quite straightforward. See our section on advanced concepts for a fuller picture on floating and other aspects of drawing pages.
The clear property can be used in conjunction with float to specify whether and or where an element allows floating. You can specify whether an element can have elements floated to its left, to its right, or at all. When an element does not allow floating on a side, then where an attempt is made to float a child element to that side, the element appears below the floated element.
clear can be specified as any one of the keywords none, left or right.
A clear of none means that an element allows floating on neither side.
A clear of left means that an element does not allow floating on its left.
A clear of right means that an element does not allow floating on its right.
If no clear is specified, an element has a clear of none, allowing floating on both sides.
An element does not inherit the clear of its parent.
Float and clear are properties that will become, when properly supported by browsers, very useful tools for creating pages which adapt to their readers' screens. As yet, the support is limited and buggy, especially for complex cases.
The clipping area is that part of an element that is actually drawn, regardless of the size or location of an element. By specifying an element's clip it is possible to show only part of the element at a time. I would classify this as one of the advanced features of CSS, with powerful but specialized uses.
Currently, CSS allows the clip of an element to be specified as either a shape or by the keyword auto.
At present, the only kind of shape that is defined is the rectangle. We discuss the shape value more fully in our section on values.
A clip of auto means that the clipping area will match the extent of the element, that is its width and its height.
Where no value is specified, the clip of an element is auto.
An element does not inherit the clip of its parent, but see hints below for how the clip and the parent's clip work together to determine the actual region where the element will be drawn.
While the clip specifies the clipping region for the element, the actual region in which the element is drawn is the intersection between the area in which the parent will be drawn and the clip of the element.
Note that the clip property can only be applied to elements that have a position property value of absolute or fixed.